<template>
  <div class="p2">
    <el-card>
      <template #header>
        <div class="card-header">
          <div class="left">
            <span>挂号订单</span>
          </div>
          <div class="right">
            <el-button link type="primary" icon="Plus">新增</el-button>
            <el-button link type="success" icon="Edit">编辑</el-button>
            <el-button link type="info" icon="Delete">删除</el-button>
            <el-button link type="warning" icon="Download">导入</el-button>
            <el-button link type="danger" icon="Upload">导出</el-button>
          </div>
        </div>
      </template>
      <template #default>
        <div class="card-default">
          <div class="top">
            <el-form :inline="true">
              <el-form-item label="就诊人">
                <el-select placeholder="全部" v-model="patientId" style="width: 90px" @change="changeUser">
                  <el-option v-for="item in allUser" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="订单状态">
                <el-select placeholder="全部" v-model="orderStatus" style="width: 160px" @change="changeOrderState">
                  <el-option v-for="(item, index) in allOrderState" :key="index" :label="item.comment" :value="item.status"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div class="bottom">
            <el-table :data="allOrderArr" border>
              <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
              <el-table-column label="医院" prop="hosname"></el-table-column>
              <el-table-column label="科室" prop="depname"></el-table-column>
              <el-table-column label="医生" prop="title"></el-table-column>
              <el-table-column label="服务费" prop="amount"></el-table-column>
              <el-table-column label="就诊人" prop="patientName"></el-table-column>
              <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
              <el-table-column label="操作" prop="operation">
                <template #default="scope">
                  <el-button type="text" @click="goDetail(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="card-footer">
          <!-- 分页器 -->
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :background="true"
            layout="prev, pager, next, jumper,->,sizes,total"
            :total="total"
            @current-change="getOrderInfo"
            @size-change="handler"
          />
        </div>
      </template> 
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
// 订单Api与Vo
import { reqUserOrderInfo, reqAllUser, reqOrderState } from "@/api/Member";
import type { AllOrderState, AllOrderStateResponseData, AllUserResponseData, AllUser, UserOrderInfoResponseData, Records } from "@/api/Member/types";
// 路由管理
import { useRouter } from "vue-router";
//获取路由器对象
let $router = useRouter();

//引入ts类型
//当前分页器页码
let pageNo = ref<number>(1);
//当前页码展示几条数据
let pageSize = ref<number>(10);
//收集就诊人的ID
let patientId = ref<string>("");
//订单的状态
let orderStatus = ref<string>("");
//存储全部的订单
let allOrderArr = ref<Records>([]);
//存储订单的总个数
let total = ref<number>(0);
//存储全部就诊人的信息
let allUser = ref<AllUser>([]);
//存储全部订单的状态
let allOrderState = ref<AllOrderState>([]);

//组件挂载完毕的钩子
onMounted(() => {
  //获取订单的方法
  getOrderInfo();
  //获取全部就诊人的信息以及获取全部的订单的状态
  getData();
});

//获取订单的方法
const getOrderInfo = async (pager: number = 1) => {
  pageNo.value = pager;
  let result: UserOrderInfoResponseData = await reqUserOrderInfo(
    pageNo.value,
    pageSize.value,
    patientId.value,
    orderStatus.value
  );
  if (result.code == 200) {
    allOrderArr.value = result.data.records;
    total.value = result.data.total;
  }
};

//详情按钮的回调
const goDetail = (row: any) => {
  $router.push({ path: "/user/orderDetail", query: { orderId: row.id } });
};

//下拉菜单事件的回调
const handler = (pageSizes: number) => {
  pageSize.value = pageSizes;
  getOrderInfo();
};

//获取就诊人与订单状态接口方法
const getData = async () => {
  //获取全部的就诊人信息
  const result: AllUserResponseData = await reqAllUser();
  //获取全部的订单状态
  const result1: AllOrderStateResponseData = await reqOrderState();
  allUser.value = result.data;
  allOrderState.value = result1.data;
};

//就诊人下拉菜单回调方法
const changeUser = () => {
  //根据就诊人的ID再次获取挂号订单的数据
  getOrderInfo();
};

//订单状态下拉菜单回调
const changeOrderState = () => {
  getOrderInfo();
};
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
